import { resolve } from "path";
import { defineConfig } from "vite";
import { VitePWA } from "vite-plugin-pwa";
import { viteTinyfy } from "vite-plugin-tinyfy";
import react from "@vitejs/plugin-react-swc";
import basicSsl from "@vitejs/plugin-basic-ssl";

const BUILD_ENV = process.env.BUILD_ENV;

// https://vitejs.dev/config/
export default defineConfig({
  server: {
    open: true,
    host: true,
    port: 4000,
    proxy: {
      "/pro-api": {
        target: `https://${BUILD_ENV}-mobile-api.bankneo.co.id`,
        rewrite: (path: string) => path.replace(/^\/pro-api/, ""),
        changeOrigin: true,
        secure: false,
      },
      "/api": {
        target: `http://localhost:3000/`,
        rewrite: (path: string) => path.replace(/^\/api/, ""),
        changeOrigin: true,
        secure: false,
      },
    },
  },
  resolve: {
    alias: {
      "@": resolve(__dirname, "./src"),
    },
  },
  plugins: [
    basicSsl(),
    react(),
    viteTinyfy(),
    VitePWA({
      strategies: "generateSW",
      // when using strategies 'injectManifest' you need to provide the srcDir
      // srcDir: 'src',
      // when using strategies 'injectManifest' use claims-sw.ts or prompt-sw.ts
      // filename: 'prompt-sw.ts',
      registerType: "prompt",
      injectRegister: false,
      pwaAssets: { disabled: false, config: true, htmlPreset: "2023", overrideManifestIcons: true },
      manifest: {
        name: "Vite PWA + React + TS",
        short_name: "Vite PWA",
        theme_color: "#ffffff",
        icons: [
          {
            src: "pwa-64x64.png",
            sizes: "64x64",
            type: "image/png",
          },
          {
            src: "pwa-192x192.png",
            sizes: "192x192",
            type: "image/png",
          },
          {
            src: "pwa-512x512.png",
            sizes: "512x512",
            type: "image/png",
          },
          {
            src: "maskable-icon-512x512.png",
            sizes: "512x512",
            type: "image/png",
            purpose: "maskable",
          },
        ],
      },
      workbox: {
        globPatterns: ["**/*.{js,css,html,svg,png,svg,ico}"],
        cleanupOutdatedCaches: true,
        clientsClaim: true,
      },
      injectManifest: {
        globPatterns: ["**/*.{js,css,html,svg,png,svg,ico}"],
      },
      devOptions: {
        enabled: false,
        navigateFallback: "index.html",
        suppressWarnings: true,
        /* when using generateSW the PWA plugin will switch to classic */
        type: "module",
      },
    }),
  ],
  build: {
    emptyOutDir: true,
    cssTarget: ["chrome53"],
    rollupOptions: {
      output: {
        manualChunks: {
          react: ["react"],
          reactDom: ["react-dom"],
          reactRouterDom: ["react-router-dom"],
          reactRedux: ["react-redux"],
          reduxjs: ["@reduxjs/toolkit"],
          axios: ["axios"],
        },
      },
    },
  },
  optimizeDeps: {
    include: ["react", "react-dom", "react-router-dom", "react-redux", "@reduxjs/toolkit", "axios"],
  },
});
